<template>
  <div>
    <slot name="header" :detailInfo="detailInfo"></slot>
    <h2>子级页面</h2>
    <!-- 默认插槽 -->
    <slot :detailInfo="detailInfo"></slot>
    <slot name="footer" :detailInfo="detailInfo"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailInfo: {
        header: "顶部",
        default: "中间",
        footer: "底部",
      },
    };
  },
  methods: {},
};
</script>
